<template>
  <h2>本地的 todo list 代办清单</h2>
  <el-button @click="ShowDialog=true">创建</el-button>
  <el-table :data="todoList" style="width: 100%" type="index">
     <el-table-column prop="content" label="内容" width="180"></el-table-column>
     <el-table-column prop="date" label="时间" width="180"></el-table-column>
     <el-table-column prop="operation" label="操作" width="180">
       <template v-slot="scope">
       <el-button type="danger" @clik.native="delFF(scope.$index)">删除</el-button>
       <el-button type="primary" @click="editFF">编辑</el-button>
     </template>
     </el-table-column>
   </el-table>
 
 <!-- 弹框   -->
 <el-dialog v-model="ShowDialog"  @open="onOpen" @close="onClose" :title="form.id?'修改代办':'添加代办'">
       <el-form ref="formRef" :model="form"  size="small" label-width="100px"
         label-position="left">
         <el-form-item label="内容" prop="content">
           <el-input v-model="form.content" placeholder="请输入内容" clearable :style="{width: '100%'}"></el-input>
         </el-form-item>
         <el-form-item label="时间" prop="date">
           <el-date-picker v-model="form.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
             :style="{width: '100%'}" placeholder="请选择时间" clearable></el-date-picker>
         </el-form-item>
       </el-form>
       <div slot="footer">
         <el-button type="primary" @click="handelConfirm"  >确定</el-button>
       </div>
     </el-dialog>
  
 
 
 
 </template>
 
 <script>
 export default {
   name: 'app',
   components: {},
   data() {
     return {
   todoList:[],
   ShowDialog:false,
   form: {
         content: undefined,
         date: null,
       },
    
     }
   },
   created() {},
   mounted() {},
   methods: {
     onClose() {
       this.$refs['formRef'].resetFields()
     },
     // 新增
     handelConfirm() {
       this.$refs['formRef'].validate(valid => {
         if (!valid) return
         // this.form.date=this.form.date.toTime
         this.todoList.push({content:this.form.content,date:this.form.date})
         window.localStorage.setItem('todoList',JSON.stringify(this.todoList))
         this. ShowDialog=false
       })
     },
     // 删除
     delFF(index){
     //  this.$confirm('确认删除?', '提示', {
     //  confirmButtonText: '确定',
     //  cancelButtonText: '取消',
     //  type: 'warning',
     //  }).then(async action => {
     //  await this.todoList.splice(this.todoList.index,1)
     //  })
     this.todoList.splice(index,1)
       
     },
     // 编辑
     editFF(){
 this.ShowDialog=true
     }
   }
 }
 </script>
 
   <style scoped lang="scss">
 
   </style>
 